<template>
	<view class="container">
		<view class="debug-section">
			<view class="section-title">调试信息</view>
			<view class="debug-item">
				<text class="label">当前页面参数：</text>
				<text class="value">{{ JSON.stringify(pageOptions) }}</text>
			</view>
			<view class="debug-item">
				<text class="label">设备ID：</text>
				<text class="value">{{ deviceId || '未获取到' }}</text>
			</view>
			<view class="debug-item">
				<text class="label">API响应：</text>
				<text class="value">{{ apiResponse || '未调用' }}</text>
			</view>
		</view>
		
		<view class="actions">
			<button class="btn-test" @click="testApi">测试API调用</button>
			<button class="btn-back" @click="goBack">返回</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDeviceDetail } from '@/api/device.js'

const pageOptions = ref({})
const deviceId = ref('')
const apiResponse = ref('')

// 获取页面参数
const getPageOptions = () => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	pageOptions.value = currentPage.options || {}
	deviceId.value = currentPage.options?.deviceId || ''
}

// 测试API调用
const testApi = async () => {
	if (!deviceId.value) {
		uni.showToast({ title: '设备ID不存在', icon: 'none' })
		return
	}
	
	try {
		uni.showLoading({ title: '测试中...' })
		const res = await getDeviceDetail(deviceId.value)
		apiResponse.value = JSON.stringify(res, null, 2)
		console.log('API测试结果:', res)
	} catch (error) {
		apiResponse.value = '错误：' + JSON.stringify(error, null, 2)
		console.error('API测试失败:', error)
	} finally {
		uni.hideLoading()
	}
}

const goBack = () => {
	uni.navigateBack()
}

onMounted(() => {
	getPageOptions()
})
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background: #f8fffe;
	min-height: 100vh;
}

.debug-section {
	background: #ffffff;
	border: 2rpx solid #e8f5e8;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 10rpx;
	border-left: 6rpx solid #2E7D32;
}

.debug-item {
	margin-bottom: 20rpx;
}

.label {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.value {
	font-size: 22rpx;
	color: #333;
	background: #f5f5f5;
	padding: 15rpx;
	border-radius: 8rpx;
	word-break: break-all;
	display: block;
}

.actions {
	display: flex;
	gap: 20rpx;
}

.btn-test, .btn-back {
	flex: 1;
	height: 80rpx;
	border-radius: 10rpx;
	font-size: 26rpx;
	border: none;
}

.btn-test {
	background-color: #2E7D32;
	color: #ffffff;
}

.btn-back {
	background-color: #f8f9fa;
	color: #333;
	border: 1rpx solid #ddd;
}
</style>
